﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:devlive="http://dev.live.com"> 
<head>
    <title>Try the Windows Live Contacts control</title>
 <!-- This sample uses https to test end-to-end https.  You can use http if your web app doesn't require https.  -->
    <script type="text/javascript" src="https://controls.services.live.com/scripts/base/v0.3/live.js"></script>
    <script type="text/javascript" src="https://controls.services.live.com/scripts/base/v0.3/controls.js"></script>    
    <style type="text/css">
        body {
            color:black;
            background-color:white;
            font-family:Verdana;
            font-size:12px;        
        }
        #ContactsControl {
            border:solid 1px black;
            float:right;
        }
        .myFooter {
            position:relative;
            left:0px;
            height:94px;
            width:100%;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='images/gradbottom.png');
            background:url(images/gradbottom.png) repeat-x;
        }
        .myFooter table {
            margin:30px 10px 0px 10px;
        }
        .myFooter a,
        .myFooter img,
        .myFooter td {
            font-size:10px;
            font-family:Verdana;
            color:#777;
            border:none;
        }
    </style>

    <script type="text/javascript">
    var _market="en";

        function signin() {
            elDisplay.innerHTML = "You're logged in!";
        };
    
        function signout() {
            elDisplay.innerHTML = "You need to log in.";
        };

        function receiveData(p_contacts) {

            var hash = window.location.hash;

            var s = "Done! " + p_contacts.length + " records received. <br>";
            for (var i = 0; i < p_contacts.length; i++) {
                s += "<p>";
                for (var j in p_contacts[i]) {
                    s += hescq(j) + ": " + hescq(p_contacts[i][j]) + "<br>";
                }
                s += "</p>";
            }
            elDisplay.innerHTML = s;

            //Focus Display Element using bookmarks
            if (window.location.hash.length>0){                               
                window.location.replace(window.location.href.replace(window.location.hash,"#ContactsDisplay"));                
                //this is to ensure we do not go up if the hash was empty.
                if (hash != "#"){
                    //return the # value previously set so the user can do a refresh without losing the configuration
                    window.location.replace(window.location.href.replace("#ContactsDisplay",hash));
                }
            }
            else {                
                window.location.replace(window.location.href+"#ContactsDisplay");                
            }

        }
    
        function showerror(p_msg) {
            elDisplay.innerHTML = hescq(p_msg);
        }
    
        function langChange() {
            postBack();
        }
    
        function postBack() {
                var lang = elMarket.options[elMarket.selectedIndex].value;
                if (lang) {
                    var s = document.location.href;
                    s = s.substr(0,s.length - document.location.hash.length) + 
                        "#" + 
                        encode(lang) +
                        "&" +
                        encode(hescq(elWidth.value)) +
                        "&" + 
                        encode(hescq(elHeight.value)) +
                        "&" + 
                        encode(hescq(elInnerBackgroundColor.value)) +
                        "&" + 
                        encode(hescq(elInnerTextColor.value)) +
                        "&" + 
                        encode(hescq(elOuterBackgroundColor.value)) +
                        "&" + 
                        encode(hescq(elOuterTextColor.value)) +
                        "&" + 
                        encode(hescq(elLinkColor.value));
                    document.location.replace(s);
                    document.location.reload();
                }
        }


        function genLanguageChoices() {
            if (!document.getElementById("ContactsControl").supportedMarkets) {
                setTimeout(genLanguageChoices, 300);
                return;
            }
            var i;
            var o = document.createElement("option");
            o.value = "";
            o.text = "(none)";
            if (window.ActiveXObject) {
                elMarket.add(o);
            } else {
                elMarket.add(o,null);
            }
            
            var languages = document.getElementById("ContactsControl").supportedMarkets();
            for (i in languages) {
                o = document.createElement("option");
                o.value = i;
                o.text = i;
                if(document.getElementById("ContactsControl").getAttribute("devlive:market") == o.value){
                    o.selected = true;
                }                            
                if (window.ActiveXObject) {
                    elMarket.add(o);
                } else {
                    elMarket.add(o,null);
                }
            }
            elMarket.value = _market;
        }

        Microsoft.Live.Platform.addEvent(window, "load", function () {setTimeout(genLanguageChoices, 300)});

        function addContact(){
            var s = hescq(elMail.value);
            if (s != "") {
                var contacts = [{emailpersonal:s}];   
                elContactsElement.createContacts(contacts);
                elContactsElement.commitContacts(processErrorDescription);
            }
        }

        function deleteContact(){
            var s = hescq(elMail.value);
            if (s != "") {
                elContactsElement.deleteContacts([s]);
                elContactsElement.commitContacts(processErrorDescription);
            }
        }

        function processErrorDescription(p_description){
            var s = "";
            if (p_description.length > 0) {
                for (var i = 0; i < p_description.length; i++) {
                    s += "<p>";
                    for (var j in p_description[i]) {
                        s += hescq(j) + ": " + hescq(p_description[i][j]) + "<br>";
                    }
                    s += "</p>";            
                }
            } else {
                s = "<p>Completed without errors!</p>";
            }
            elDisplay.innerHTML = s;
        }

        function resize() {
            elContactsElement.style.width = hescq(elWidth.value.replace("px", "") + "px");
            elContactsElement.style.height = hescq(elHeight.value.replace("px", "") + "px");
        }
        
        function showContacts() {
            var iX = hescq(elWidth.value.replace("px", ""));
            var x = 0;
            expandContacts();
            function expandContacts() {
                if (x < iX) {
                    x = Math.min(x + 50, iX);
                    elContactsElement.style.width = x + "px";
                    setTimeout(expandContacts,50);
                }
            }
        }

        function hideContacts() {
            var x = hescq(elWidth.value.replace("px", ""));
            shrinkContacts();
            function shrinkContacts() {
                if (x > 0) {
                    x = Math.max(x - 50, 0);
                    elContactsElement.style.width = x + "px";
                    setTimeout(shrinkContacts,50);
                }
            }
        }

        function toggleContacts() {
            var iX = elContactsElement.style.width.replace("px", "");
            if (iX <= 0) {
                showContacts();
            } else {
                hideContacts();
            }
        }
                
        function hescq(p_str) {
            return p_str.replace(/&/g,"&amp;").replace(/</g, "&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;").replace(/\'/g,"&apos;"); 
        }
        
        function encode(str) {
            if ("string" != typeof str) str = "";
            str = encodeURIComponent(str);
            return str.replace(/%/g, "\\"); /* hide '%' from browser (Firefox) */
        }

        function decode(str) {
            if ("string" != typeof str) str = "";
            str = str.replace(/\\/g, "%"); /* translate '\\' back to '%' */
            return decodeURIComponent(str);
        }
    </script>
</head>
<body onload='resize();'>

    <h2>Try the Windows Live Contacts control</h2>

    <devlive:contactscontrol 
        id="ContactsControl"
        devlive:privacyStatementURL="http://g.msn.com/2privacy/enus"
        devlive:dataDesired="name,email,phone,firstname,middlename,lastname,nickname,passportname,emailpersonal,emailbusiness,emailother,phonepersonal,phonebusiness,phonemobile,phonepager,phonefax, phoneother, personalstreet, personalcity, personalstate, personalcountry, personalpostalcode, businessname, businessstreet, businesscity, businessstate, businesscountry, businesspostalcode, websitepersonal, websitebusiness, spacesrssurl,spacesrsscontent"
        devlive:onData="receiveData"
        devlive:onSignin="{ signin(); }"
        devlive:onSignout="{ signout(); }"
        devlive:onError="showerror"
        devlive:channelEndpointURL="channel.htm" 
    ></devlive:contactscontrol>
    
    This is a simple mashup that demonstrates the various features of the control. Please try it out!!<br />
    You can integrate this control for example into your shopping cart to make it easy for your customer to specify shipping address.<br />
    You can integrate this control into your contact page where a customer can add you to their contact list with a click of the button. <br />
    <br />
    <strong>Right click view source to see how all this is done - it's one page of javascript and html. </strong><br />
    <br />
    <br />

    <table style="display:inline">
        <tr>
            <td colspan=2>
                You don't need to give up a fixed area of your screen to the control, you can make it hide and show.<br />
                <input type="button" value="Hide and show the control" onclick="toggleContacts();" />
            </td>
        </tr>
        <tr>
            <td colspan=2>&nbsp</td>
        </tr>
        <tr>
            <td colspan=2>
                The drop down below shows you the currently supported languages. 
                Please choose one to see how the user interface changes in the control.
            </td>
        </tr>
        <tr>
            <td>
                <strong>Language/Market:</strong> 
            </td>
            <td>
                <select id="langPicker" onchange="langChange();">
                </select>
            </td>
        </tr>
        <tr>
            <td colspan=2>&nbsp</td>
        </tr>
        <tr>
            <td colspan=2>
                By changing the width and height of the control, you can see how the user interface changes in the control. 
                The standard sizing for the control should be as follows based on language:
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <table style="border:1px solid black">
                    <tr>
                        <td>en</td><td>Width:200px Height:300px</td>
                    </tr>
                    <tr>
                        <td>jp, fr</td><td>Width:220px Height:300px</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Width:</strong>
            </td>
            <td>
                <input 
                    id="setWidth" 
                    style="width:6em;" 
                    onchange="resize();"/>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Height:</strong>
            </td>
            <td>
                <input 
                    id="setHeight" 
                    style="width:6em;" 
                    onchange="resize();"/>
            </td>
        </tr>
        <tr>
            <td colspan=2>&nbsp</td>
        </tr>
        <tr>
            <td colspan=2>
                Try entering an email below, and clicking either add or delete contact. 
                You can see how data in Windows Live Contacts can be modified.
            </td>
        </tr>
        <tr>
            <td>
                <strong>Email:</strong>
            </td>
            <td>
                <input id="emailAlias" type="text"></input>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input value="Add Contact" type="button" onclick="{ addContact(); }"></input>
                <input value="Delete Contact" type="button" onclick="{ deleteContact(); }"></input>
            </td>
        <tr>
            <td colspan=2>&nbsp</td>
        </tr>
        <tr>
            <td colspan=2>
                The developer can specify color for areas in the control. The accepted format is #FFFFFF (hex), rgb(255,255,255), or one of aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow.
            </td>
        </tr>
        <tr>
            <td>
                <strong>Inner Background Color:</strong>
            </td>
            <td>
                <input id="innerBackgroundColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Inner Text Color:</strong>
            </td>
            <td>
                <input id="innerTextColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Outer Background Color:</strong>
            </td>
            <td>
                <input id="outerBackgroundColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Outer Text Color:</strong>
            </td>
            <td>
                <input id="outerTextColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Link Color:</strong>
            </td>
            <td>
                <input id="linkColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input value="Set Colors" type="button" onclick="{ postBack(); }"></input>
            </td>
        <tr>        
        <tr>
            <td colspan=2>&nbsp</td>
        </tr>
        <tr>
            <td colspan=2>
                The developer can write code that reacts to state changes in the control thru the various events.
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <strong>Status:</strong>
                <div id="ContactsDisplay"></div>
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        var elMarket = document.getElementById('langPicker');
        var elWidth = document.getElementById('setWidth');
        var elHeight = document.getElementById('setHeight');
        var elMail = document.getElementById('emailAlias');
        var elContactsElement = document.getElementById("ContactsControl");
        var elDisplay = document.getElementById('ContactsDisplay');
        var elInnerBackgroundColor = document.getElementById('innerBackgroundColor');
        var elInnerTextColor = document.getElementById('innerTextColor');
        var elOuterBackgroundColor = document.getElementById('outerBackgroundColor');
        var elOuterTextColor = document.getElementById('outerTextColor');
        var elLinkColor = document.getElementById('linkColor');

        //This will happen if someone hits refresh after displaying results.
        if (document.location.hash == "#ContactsDisplay"){
            document.location.href = document.location.href.replace("#ContactsDisplay","#");
        }

        if (document.location.hash.length > 1 && document.location.hash != "#ContactsDisplay") {
            var args = document.location.hash.substr(1).split('&');
            if (args.length == 8) {
                elContactsElement.setAttribute("devlive:market", hescq(args[0]));
                elContactsElement.setAttribute("devlive:privacyStatementURL", "http://g.msn.com/2privacy/" + hescq(args[0]));
                elContactsElement.setAttribute("devlive:innerBackgroundColor", decode(args[3]));
                elContactsElement.setAttribute("devlive:innerTextColor", decode(args[4]));
                elContactsElement.setAttribute("devlive:outerBackgroundColor", decode(args[5]));
                elContactsElement.setAttribute("devlive:outerTextColor", decode(args[6]));
                elContactsElement.setAttribute("devlive:linkColor", decode(args[7]));

                _market = hescq(decode(args[0]));
                elWidth.value = hescq(decode(args[1]));
                elHeight.value = hescq(decode(args[2]));
                elInnerBackgroundColor.value = hescq(decode(args[3]));
                elInnerTextColor.value = hescq(decode(args[4]));
                elOuterBackgroundColor.value = hescq(decode(args[5]));
                elOuterTextColor.value = hescq(decode(args[6]));
                elLinkColor.value = hescq(decode(args[7]));
            }
        } else {
            elWidth.value = "200";
            elHeight.value = "300";
        }
            
        elDisplay.innerHTML = "Initializing Contacts Listbox";
        resize();
    </script>

    <!-- Footer -->
    <div id="myFooter" class="myFooter">
        <table>
            <tr>
                <td style="width:90%">
                    <span style="margin-right: 12px;">&copy;2007 Microsoft Corporation</span>
                    <a target="_blank" href="http://g.msn.com/0PR_/enus">Privacy</a>&nbsp;|&nbsp;
                    <a target="_blank" href="http://g.msn.com/0TO_/enus">Legal</a>&nbsp;|&nbsp;
                    <a target="_blank" href="http://feedback.live.com/default.aspx?productkey=wldev&mkt=en-us">Feedback</a>
                </td>
                <td>
                    <a href="http://dev.live.com"><img src="https://dev.live.com/Themes/default/images/logo.gif" alt="Windows Live Dev" /></a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
